<script setup lang="ts">
const userId = useRoute().query.id as string
const username = useRoute().query.u as string
const radio1 = ref('password')
const input = ref('')

function goBack() {
  navigateTo('/')
}

function modify() {
  if (radio1.value === 'password') {
    if (!/^[A-Za-z0-9]+$/.test(input.value)) {
      ElMessage.warning('密码只能由数字和字母组成')
      return
    }
  } else if (radio1.value === 'phone') {
    if (!/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(input.value)) {
      ElMessage.warning('手机号码格式不正确')
      return;
    }
  }
  cFetch('/account/modify', {
    auth: true,
    defaultOpts: {
      method: "PUT",
      body: {
        id: userId,
        [radio1.value]: input.value,
      }
    }
  }).then(res => {
    if (res.code === 200) {
      input.value = ''
      ElMessage.success('修改成功')
    }
  })
}
</script>

<template>
  <div class="content">
  <span style="margin-bottom: 4% ; ">
    操作的用户：{{ username }}
  </span>
    <span>
    选择操作：
  </span>
    <div class="radio">
      <el-radio-group v-model="radio1">
        <el-radio value="password" size="large">重置密码：</el-radio>
        <el-radio value="phone" size="large">换绑手机：</el-radio>
      </el-radio-group>
    </div>
    <el-input v-model="input" style="width: 240px;margin: 4% 0" placeholder="Please input"/>
    <div>

      <el-button type="info" @click="goBack">返回上一级</el-button>
      <el-button type="primary" @click="modify">提交修改</el-button>

    </div>
  </div>


</template>

<style scoped lang="scss">
.content {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

</style>